<template>
	<page-meta class="pages" :style="{ 'min-height': h + 'px' }" :page-style="'overflow:' + (hiddenShow ? 'hidden' : 'visible')">
		<view class="p_bg"></view>
		<c-nav-bar :title="titleHeader" bgColor='transparent'></c-nav-bar>
		<view class="topTitle" :style="{ 'margin-top': mt + 'px' }">
			<view class="location">
				<view class="begin" @click="tapBegin">
					<span class="location_title">出发地</span>
					<span style='font-weight: bold;font-size: 28rpx; color: #111;'>{{ dataList.startSpot.name }}</span>
				</view>
				<image src="https://i.ringzle.com/file/20240119/542fc4522777472ab78741a9262f9ffc.png" mode=""></image>
				<view class="finally" @click="changeArrive">
					<span class="location_title">目的地</span>
					<span style='font-weight: bold;font-size: 28rpx; color: #111;'>{{ dataList.endSpot.name }}</span>
				</view>
			</view>
			<view class="date">
				<span class="date_qyt" :class="notQyt ? 'active' : ''" @tap="previousDay">
					<!-- <u-icon name="arrow-left" style="margin-right: 10rpx; font-size: 28rpx; color: #AAAAAA;"></u-icon> -->
					<image v-if="notQyt" style="width: 36rpx;height: 36rpx; margin-right: 10rpx;"
						src="https://i.ringzle.com/file/20240130/e6cd6a1820dd4e50a63a8e5fea830ab2.png" mode=""></image>
					<image v-else class="notQyt_img" style="width: 36rpx; height: 36rpx; margin-left: 10rpx;"
						src="https://i.ringzle.com/file/20240130/101bee17ebee4401a075eec50f6bff8a.png" mode=""></image>
					前一天
				</span>
				<span class="date_mid" @tap="() => {
					this.timeShow = true
				}">{{ time }} <u-icon name="arrow-down-fill" color="#FFFFFF" size="28rpx"></u-icon></span>
				<span class="date_hyt" @tap="nextDay">后一天
					<!-- <u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon> -->
					<image style="width: 36rpx; height: 36rpx; margin-left: 10rpx;"
						src="https://i.ringzle.com/file/20240130/101bee17ebee4401a075eec50f6bff8a.png" mode=""></image>
				</span>
			</view>
			<view class="tabBar">
				<span @tap="tapTabBar(index)" :class="[TabBarIndex == index ? 'tabBar_selected' : 'tabBarItem']"
					v-for="item, index in tabbar" :key="index">{{ item }}</span>
			</view>
		</view>
		<view class="imageTips" v-if="TabBarIndex == 1">
			<image class="image" src="https://i.ringzle.com/file/20240112/3ca9fd21b3da48ba819334faf675698b.png"
				mode="scaleToFill">
				<span class="image1" style="position: absolute;
					left: 23px;
					top: 8px;
					font-size: 28rpx;">轮渡<br>
					提示</span>
				<span class="image2 it_tip">前往嵊泗岛轮渡船班时间为9:25～20:00<br>请自驾用户注意轮渡时间</span>
			</image>
		</view>
		<view class="programme">
			<view class="card" v-for="(item, index) in list" :key="index">
				<image class='image' src="https://i.ringzle.com/file/20240119/4d6dda6d87644dc8abaeceb82bf6453a.png"
					mode="aspectFit" v-if="index == 0">
				</image>
				<image class='image' src="https://i.ringzle.com/file/20240122/8da731e6db794d86bd9cfafb5ebe166d.png"
					mode="aspectFit" v-else>
				</image>
				<view class="card_title" v-if="index == 0">
					<!-- <span style="font-weight: 700;font-size: small;">方案{{arabicToChinese(index+1)}}</span> -->
					<image :src="faImgs[0]"></image>
					<span style="margin-bottom: 4px;margin-right: 8px;">41%用户选择该路线</span>
				</view>
				<view class="card_title" v-else>
					<image :src="faImgs[index]" v-if="index < 2"></image>
					<span v-else class="else_span">方案{{ arabicToChinese(index + 1)
						}}</span>
				</view>
				<!-- 图标类型/logoType(1:起点 2:高铁 3:步行 4:船票 5:公交 10:终点) -->
				<!-- 按钮类型/buttonType(1:开始导航2:公交详情3:换乘攻略4:渡车攻略) -->
				<!-- “线颜色1:绿色 2:虚线 :蓝线" -->
				<view class="content1" style="padding: 81rpx 20rpx 30rpx;">
					<view class="content" v-for="i, idx in item" :key="idx">
						<view class="card1" v-if="i.logoType == 1">
							<view class="icon">
								<image src="https://i.ringzle.com/file/20240119/18d4e0cb73eb4031beee020fd637ee0a.png" mode="aspectFit">
								</image>
								<span class="city">{{ i.name }}</span>
							</view>
						</view>

						<view class="card1" v-else-if="i.logoType == 2">
							<view class="icon">
								<image src="https://i.ringzle.com/file/20240121/2dacd3ee72004b2d92bafe05ec1e3a7c.png" mode="aspectFit">
								</image>
								<span class="city">
									{{ i.name }}
								</span>
							</view>
						</view>
						<view class="card1" v-else-if="i.logoType == 4">
							<view class="icon">
								<image src="https://i.ringzle.com/file/20240119/b2fbb33b4cac4c7581fe25107541b0ed.png" mode="aspectFit">
								</image>
								<span class="city">{{ i.name }}</span>
							</view>
						</view>
						<view class="card1" v-else-if="i.logoType == 5">
							<view class="icon">
								<image src="https://i.ringzle.com/file/20240121/9255852e0b9444ba91e3212e42fa8f09.png" mode="aspectFit">
								</image>
								<span class="city">{{ i.name }}</span>
							</view>
						</view>
						<view class="card1" v-else-if="i.logoType == 10">
							<view class="icon">
								<image src="https://i.ringzle.com/file/20240120/ed00fb91d20e4526b2049825219b41ef.png" mode="aspectFit">
								</image>
								<span class="city">{{ i.name }}</span>
							</view>
						</view>
						<view class="card1" v-if="i.lineType == 1">
							<view class="icon">
								<view class="rectAngle">
									<span class="greenRectAngle"></span>
								</view>
								<span class="routeInfo">
									<!-- <span v-if="i.buttonType==3 && i.huanChengType==2"> 地铁1111111111</span> -->
									<span>{{ i.desc || '' }}</span>
									<span class="operateBtn" v-if='i.buttonType == 1 && item[1].latitude && item[1].longitude'
										:class="!i.desc ? 'obringht' : ''" @tap="startDh(item[1])">开始导航 <image
											src="https://i.ringzle.com/file/20240121/22a95e2875f04cf3877ec05fb41f2c7b.png" mode="aspectFill">
										</image></span>
									<span class="operateBtn gjxq2" @tap="showHcImg(i)" v-else-if='i.buttonType == 3'>换乘攻略 <image
											src="https://i.ringzle.com/file/20240121/22a95e2875f04cf3877ec05fb41f2c7b.png" mode="aspectFill">
										</image></span>
								</span>
							</view>
						</view>
						<view class="card1" v-else-if="i.lineType == 3">
							<view class="card1_shipTicket" v-if="i.ticketFlag">
								<view class="rectAngle">
									<span class="blueRectAngle" style="min-height: 90rpx !important; "></span>
								</view>
								<view class="shipTicket">
									<view class="shipTicketFor"
										@tap="i.ticketQueryList.length == 1 ? setParams(i.ticketQueryList[0], 1) : setParams(i.ticketQueryList, 2)"
										v-if="i.ticketList && i.ticketList.length !== 0">
										<view class="left">
											<view class="left1">
												{{ i.ticketList[0].startPortName }}
											</view>
											<view class="left2">
												<span
													style="width:150rpx;text-align: center;font-size: 24rpx; color: #88919D; font-weight: Regular;">{{
														i.ticketList[0].timeMemosStr || '' }}</span>
												<image src="https://i.ringzle.com/file/20240119/542fc4522777472ab78741a9262f9ffc.png" mode="">
												</image>

												<span v-if="i.ticketList[0].busStartTime" @tap.stop="showInfo(i.ticketList[0])"
													style=" color: #188FFE;width:150rpx;text-align: center;font-size: 24rpx; font-weight: Regular;">车船联票
													<image style="width: 24rpx;height: 24rpx;"
														src="https://i.ringzle.com/file/20240121/22a95e2875f04cf3877ec05fb41f2c7b.png"
														mode="aspectFill"></image>
												</span>
												<span v-else style="width:150rpx;text-align: center;font-size: 2rpx;">{{ i.ticketList[0].clxm
													}}</span>
											</view>
											<view class="left1">
												{{ i.ticketList[0].endPortName }}
											</view>
											<view class="pricenews">
												<span>￥</span> {{ i.ticketList[0].priceAndTotalCount.minPrice }}
												<span>起</span>
											</view>
										</view>
										<view class="rightquanbu">
											<view class="rightquanbu1">
												全部
											</view>
											<view class="rightquanbu2">
												班次
											</view>
										</view>
									</view>
									<view class="shipTicketEmpty" v-if="(i.logoType == 4 || i.logoType == 5) && i.ticketList.length == 0">
										<!-- <image src="https://i.ringzle.com/file/20240220/0484f35c6d844ea98ec822792b79b417.png"></image> -->
										<view class="ce_tip">{{ i.desc || '暂无航班' }}</view>
									</view>
								</view>
							</view>
							<view class="icon" v-else>
								<!-- 虚线 -->
								<!-- <view class="imageTop">
									<image style="width: 16rpx;height: 71px;"
										src="https://i.ringzle.com/file/20240119/ad5b2d1bdce54fff9b7a1665ee2df476.png"
										mode="aspectFit"></image>
								</view> -->
								<view class="rectAngle">
									<span class="blueRectAngle" style="min-height: 90rpx !important; "></span>
								</view>
								<span class="routeInfo">
									<!-- <span v-if="i.buttonType==3 && i.huanChengType==2"> 地铁2222222222</span> -->
									<span>{{ i.desc || '' }}</span>
								</span>
							</view>
						</view>
						<view class="card1" v-else-if='i.lineType == 2'>


							<view class="icon">
								<!-- 虚线 -->
								<view class="imageTop">
									<image style="width: 16rpx;height: 71px;"
										src="https://i.ringzle.com/file/20240119/ad5b2d1bdce54fff9b7a1665ee2df476.png" mode="aspectFit">
									</image>
								</view>
								<span class="routeInfo">
									<!-- 换乘攻略 乘坐地铁路线 -->
									<span class="routeInfo-huanChengType" style="display: flex; text-align: center;"
										v-if="i.buttonType == 3 && i.huanChengType == 2">
										<span
											style=" font-weight:Bold;font-size: 22rpx; color: #FFFFFF; width: 88rpx; height: 36rpx; line-height: 36rpx; border-radius: 10rpx; background-color: #C1B1CD; padding: 0 8rpx;">10号线</span>
										<span
											style="font-size:22rpx ; color: #B9A4C9; height: 36rpx; line-height: 36rpx; font-weight: Bold; margin: 0 8rpx;">虹桥路站</span>
										<span
											style="font-weight:Bold; display: block; width: 31rpx;  height: 31rpx; border-radius: 50rpx; text-align: center; line-height: 31rpx; font-size: 22rpx; color: #C1B1CD; border: 1rpx solid #C1B1CD;">转</span>
										<span style="margin: auto 8rpx;">
											<u-icon name="play-right-fill" size="20" color="#AAAAAA"></u-icon>
										</span>
										<span
											style=" font-weight:Bold;font-size: 22rpx;  color: #FFFFFF; width: 116rpx; height: 36rpx; line-height: 36rpx; border-radius: 10rpx; background-color: #522E88; padding: 0 8rpx;">4号线外圈</span>
									</span>
									<span style="display: block;">{{ i.desc || '' }}</span>
								</span>
							</view>
							<span class="operateBtn" v-if='i.buttonType == 1 && item[1].latitude && item[1].longitude'
								@tap="startDh(item[1])">开始导航 <image
									src="https://i.ringzle.com/file/20240121/22a95e2875f04cf3877ec05fb41f2c7b.png" mode="aspectFill">
								</image></span>
							<span class="operateBtn gjxq" v-else-if='i.buttonType == 2' @tap="toDcgl(i.textContent, '公交详情')">公交详情
								<image src="https://i.ringzle.com/file/20240121/22a95e2875f04cf3877ec05fb41f2c7b.png" mode="aspectFill">
								</image>
							</span>
							<span class="operateBtn gjxq" @tap="showHcImg(i)" v-else-if='i.buttonType == 3'>换乘攻略 <image
									src="https://i.ringzle.com/file/20240121/22a95e2875f04cf3877ec05fb41f2c7b.png" mode="aspectFill">
								</image></span>
							<span class="operateBtn dcgl" v-else-if='i.buttonType == 4 && i.textContent'
								@tap="toDcgl(i.textContent, '渡车攻略')">渡车攻略
								<image src="https://i.ringzle.com/file/20240121/22a95e2875f04cf3877ec05fb41f2c7b.png" mode="aspectFill">
								</image>
							</span>

						</view>
						<!-- 	<view class="card1">
							<view class="icon">
								<view class="imageTop">
									<image style="width: 16rpx;height: 71px;"
										src="https://i.ringzle.com/file/20240119/ad5b2d1bdce54fff9b7a1665ee2df476.png"
										mode="aspectFit"></image>
								</view>
					
								<span class="routeInfo">车停在沈家湾停车场</span>
							</view>
							<span class="operateBtn">开始导航 ▶</span>
						</view>
						<view class="card1">
							<view class="icon">
								<image src="https://i.ringzle.com/file/20240119/b2fbb33b4cac4c7581fe25107541b0ed.png"
									mode="aspectFit"></image>
								<span class="city">嵊泗沈家湾客运码头</span>
							</view>
						</view>
						
						<view class="card1">
							<view class="icon">
					
								<image src="https://i.ringzle.com/file/20240119/b2fbb33b4cac4c7581fe25107541b0ed.png"
									mode="aspectFit"></image>
								<span class="city">枸杞干斜码头</span>
							</view>
						</view>
						<view class="card1">
							<view class="icon">
								<view class="imageTop">
									<image style="width: 16rpx;height: 71px;"
										src="https://i.ringzle.com/file/20240119/ad5b2d1bdce54fff9b7a1665ee2df476.png"
										mode="aspectFit"></image>
								</view>
								<span class="routeInfo">打车或公交</span>
							</view>
							<span class="operateBtn">公交详情 ▶</span>
						</view> -->

					</view>
				</view>


			</view>
		</view>
		<view class="popUp">
			<!-- 出发地弹窗 -->
			<u-popup :show="beginShow" @close="beginShowClose" closeOnClickOverlay :closeable='true' round='16' mode='bottom'>
				<view class="popupTitle">
					<text>请选择出发地</text>
				</view>
				<view class="tabs">
					<u-tabs :list="beginNavBarList" @click="chooseCityOrPort"></u-tabs>
				</view>

				<view class="city" v-if="!cityPortFlag">
					<view class="cityChoosed">
						<span style="color:#01B9F9 ; margin-right: 30rpx;" @click="() => {
							provinceFlag = true
							province = ''
						}">{{ province }}</span>
						<span style="color:#01B9F9 ;margin-right: 30rpx; ">{{ city }}</span>
						<span v-if="province || city">请选择</span>

					</view>
					<scroll-view v-if="provinceFlag" :scroll-into-view="scrollTop" :scroll-y="true" style="height: 100%;">
						<span style="color: #a7a7a7;margin: 14px 16px;">热门城市</span>
						<view class="hotCity">
							<span :class="[cityIndex == index ? 'hotCity_selected' : '']" v-for="item, index in hotCity" :key="index"
								@click="chooseHotCity(item, index)">
								{{ item.name }}
							</span>
						</view>
						<view class="indexList">
							<view class="citysIndex">
								<view class="citysList">
									<view class="citysTitle">
										<label>所有城市</label>
									</view>
									<view class="citysIndexList">
										<view class="van-index-bar">
											<template v-for="(v, i) in groups">
												<view class="listIndexTitle" :id="v[0].initial">
													<label>{{ v[0].initial }}</label>
												</view>
												<view @click="tapPrvince(q)" class="listIndexText" v-for="(q, w) in v" :key="q.id">
													<label :class="[q.checked ? 'cityChecked' : '']">{{ q.name }}</label>
												</view>
											</template>
											<!-- 右边字母坐标 -->
											<view class="index-sidebar">
												<template v-for="(v, i) in indexList">
													<view :class="[scrollTop == v ? 'index-bar:active' : 'index-bar']" @click="findCity(v)">{{ v
														}}</view>
												</template>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 二级城市菜单 -->
					<scroll-view v-else :scroll-into-view="scrollTop" :scroll-y="true" style="height: 100%;">
						<view class="indexList">
							<view class="citysIndex">
								<view class="citysList">
									<view class="citysTitle">
										<label>所有城市</label>
									</view>
									<view class="citysIndexList">
										<view class="van-index-bar">
											<template v-for="(v, i) in cityList">
												<view class="listIndexTitle" :id="v[0].initial">
													<label>{{ v[0].initial }}</label>
												</view>
												<view @click="tapCity(q)" class="listIndexText" v-for="(q, w) in v" :key="q.id">
													<label :class="[q.checked ? 'cityChecked' : '']">{{ q.name }}</label>
												</view>
											</template>
											<!-- 右边字母坐标 -->
											<view class="index-sidebar">
												<template v-for="(v, i) in indexList">
													<view :class="[scrollTop == v ? 'index-bar:active' : 'index-bar']" @click="findCity(v)">{{ v
														}}</view>
												</template>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="port" v-else>
					<view class="mainContent">
						<span @click="chooseStartPort(index)" v-for="(item, index) in startPortList" :key="index"
							:class="startPortIndex == index ? 'portStyle_selected' : 'portStyle'">{{ item.name }}</span>
					</view>
				</view>
			</u-popup>
			<!-- 目的地弹窗 -->
			<u-popup round='16' mode='bottom' @close="arriveShowClose" :show="arriveShow" closeOnClickOverlay='true'
				closeable>
				<view class="popupTitle">
					<text>请选择目的地</text>
				</view>
				<view class="mainContent">
					<span @click="chooseEndPort(index)" v-for="(item, index) in endPortList" :key="index"
						:class="endPortIndex == index ? 'portStyle_selected' : 'portStyle'">{{ item.name }}</span>
				</view>
			</u-popup>
			<u-calendar :defaultDate="defaultDate" @close='timeClose()' closeOnClickOverlay round='16' rowHeight='65'
				:show="timeShow" @confirm="timeConfirm" ref="calendar1" :maxDate="maxDate"></u-calendar>

		</view>

		<!-- 船票弹窗 -->
		<view class="t_u_popup">
			<u-popup :show="selectShowOne" @close="closePopup(1)">
				<view class="cxgh_popup cxgh_popup_one">
					<image class="cp_bg" src="https://i.ringzle.com/file/20240227/b3cb43128a4c4375a16934e755aeea91.png">
					</image>
					<view class="cp_title">
						<image class="cpt_back" @tap="toReturnLast" v-if="step > 0"
							src="https://i.ringzle.com/file/20240227/8c501b87868d4ecea748be8eca37f3c1.png"></image>
						<text>{{ titleOne }}</text>
						<image class="cpt_close" src="https://i.ringzle.com/file/20240119/de2b4eb0895d49238f08ea794572b5ef.png"
							@tap="closePopup(1)"></image>
					</view>
					<view class="cp_box" :style="{ 'height': (h - 216) + 'px' }">
						<block v-if="step == 0">
							<view class="clandar">
								<view class="left">
									<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
										<view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in clandars" :key="index" @tap="changeDate(item,index)">
											<view class="cl_item" :class="cidx===index?'active':''">
												<text>{{item.tip}}</text>
												<text v-if="cidx===index">{{item.date}}</text>
												<text v-else>{{item.day}}</text>
											</view>
										</view>
									</scroll-view>
								</view>
								<view class="right">
									<view class="box" @tap="sdShow = true">
										<image src="https://i.ringzle.com/file/20240220/22c60fa66a42436195849d619e93ca83.png" mode="">
										</image>
										<image src="https://i.ringzle.com/file/20240220/e7087ee5c86940909996adb83d1e1748.png" mode="">
										</image>
									</view>
									<image class="cr_bg" src="@/static/index/steamerTicket/img_wt.png" mode=""></image>
								</view>
							</view>
							<block v-if="lineOnelist.length > 0">
								<view class="c_items" v-for="(item, index) in lineOnelist" :key="index"
									:class="((hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount) == 0 || item.lineState != 0) ? 'active' : ''">
									<view class="time">
										<block v-if="item.busStartTime">{{ item.busStartTime }}</block>
										<block v-else>{{ item.sailTime || '' }}</block>
										<view class="cclp" @tap.stop="showInfo(item)" v-if="item.busStartTime">
											<text>车船联票</text>
											<image v-if="item.priceAndTotalCount.totalCount != 0"
												src="https://i.ringzle.com/file/20240318/60518164c4a140fc857972fca377151b.png"></image>
											<image v-else src="@/static/index/steamerTicket/icon_trigon_hs.png"></image>
										</view>
									</view>
									<view class="middle">
										<view class="top">
											<image src="@/static/index/steamerTicket/icon_line.jpg" mode=""></image>
											<view class="texts">
												<text>{{ item.startPortName }}</text>
												<text>{{ item.endPortName }}</text>
											</view>
										</view>
										<view class="cbottom">{{ item.clxm }}<span v-if="item.timeMemosStr">{{ item.timeMemosStr }}</span>
										</view>
									</view>
									<view class="right" v-if="item.lineState == 0">
										<view class="price">
											￥<span>{{ !hasLocal ? item.priceAndTotalCount.minPrice : item.priceAndTotalCount.localMinPrice
												}}</span><span class="rp_qi">起</span></view>
										<text
											v-if="(hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount) > 0">余票{{
												hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount }}张</text>
										<text v-else>售罄</text>
										<view class="buy"
											v-if="(hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount) > 0"
											@tap.prevent="selectFlight(item)">购票</view>
									</view>
									<view class="right_state" v-else>
										{{ item.lineStateName || '未知' }}
									</view>
								</view>
							</block>
							<view class="c_empty" v-else>
								<image src="https://i.ringzle.com/file/20231218/9a6971f8275341beadeddfb681985975.png">
								</image>
								<view class="ce_tip">暂无航班班次</view>
								<view class="ce_ssgq" v-if="isSsGq">
									<view>嵊山与枸杞有大桥连通，去枸杞的船票售罄，可选择去嵊山的船票！</view>
									<view>嵊山码头距枸杞码头驾车<span style="color: #FF4141;font-weight: bold;">1小时</span>左右，</view>
									<view>请您合理安排好时间</view>
								</view>
							</view>
						</block>
						<block v-else-if="step == 1">
							<CxghConfirmBooking @toPassengerPay="toPassengerPay" ref="cxghConfirmBooking" />
						</block>
						<block v-else-if="step == 2">
							<CxghPassengerPay :coupon="coupon"  @toPayResult="toPayResult" ref="cxghPassengerPay" />
						</block>
						<block v-else-if="step == 3">
							<CxghPayResult @toCloseShip="toCloseShip" ref="cxghPayResult" />
						</block>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="t_u_popup">
			<u-popup :show="selectShowTwo" @close="closePopup(2)">
				<view class="cxgh_popup cxgh_popup_two" :id="step2 === 1 ? 'pdb_80' : ''">
					<view class="cp_title">
						<image class="cpt_back" @tap="toReturnLastTwo" v-if="step2 > 0"
							src="https://i.ringzle.com/file/20240227/8c501b87868d4ecea748be8eca37f3c1.png"></image>
						<text>{{ titleTwo }}</text>
						<image class="cpt_close" src="https://i.ringzle.com/file/20240119/de2b4eb0895d49238f08ea794572b5ef.png"
							@tap="closePopup(2)"></image>
					</view>
					<view class="cp_box" :style="{ 'height': (h - 216) + 'px' }">
						<block v-if="step2 == 0">
							<view class="cpb_box">
								<view class="cpbb_left">
									<view class="cpbb_top">
										<view class="ct_address">
											<text>{{ params1.from }}</text>
											<text>{{ params1.to }}</text>
											<image class="ct_rbg ct_rbg_two"
												src="https://i.ringzle.com/file/20240120/2462d91e21384df59394fe486643da2f.png">
											</image>
										</view>
										<view class="ct_date" @tap="leftShow = true">
											<text>{{ params1.yr }}{{ params1.week }}</text>
											<image src="https://i.ringzle.com/file/20240120/c9c2a546bd8b4c4bae0e95a637c72b45.png">
											</image>
										</view>
									</view>
									<view class="cpbb_items">
										<block v-if="leftLineList.length > 0">
											<view class="c_items" v-for="(item, index) in leftLineList" :key="index"
												@tap="selectLeftItem(item, index)"
												:class="((hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount) == 0 || item.lineState != 0) ? 'active' : (item.isSelect ? 'selected_item' : '')">
												<view class="ci_top">
													<view class="time">
														<block v-if="item.busStartTime">{{ item.busStartTime }}</block>
														<block v-else>{{ item.sailTime || '' }}</block>
													</view>
													<view class="middle">
														<view class="top">
															<image src="https://i.ringzle.com/file/20240120/1d79f0d505734dffa5d4830fcf3b0f58.png"
																mode="">
															</image>
															<view class="texts">
																<text>{{ item.startPortName }}</text>
																<text>{{ item.endPortName }}</text>
															</view>
														</view>
														<view class="right" v-if="item.lineState == 0">
															<view class="price">
																￥<span>{{ !hasLocal ? item.priceAndTotalCount.minPrice :
																	item.priceAndTotalCount.localMinPrice }}</span><span class="rp_qi">起</span></view>
															<text
																v-if="(hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount) > 0">余票{{
																	hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount
																}}张</text>
															<text v-else>售罄</text>
														</view>
														<view class="right_state" v-else>
															{{ item.lineStateName || '未知' }}
														</view>
													</view>
												</view>
												<view class="cbottom">
													{{ item.clxm }}
													<span v-if="item.timeMemosStr">{{ item.timeMemosStr }}</span>
													<view class="cclp" v-if="item.busStartTime" @tap.stop="showInfo(item)">
														<text>车船联票</text>
														<image v-if="item.priceAndTotalCount.totalCount != 0"
															src="https://i.ringzle.com/file/20240318/60518164c4a140fc857972fca377151b.png"></image>
														<image v-else src="@/static/index/steamerTicket/icon_trigon_hs.png">
														</image>
													</view>
												</view>
											</view>
										</block>
										<view class="c_empty" v-else>
											<image src="https://i.ringzle.com/file/20240229/e8f154c331804809b4c6f851ece996c6.png">
											</image>
											<view class="ce_tip">暂无航班班次</view>
											<view class="ce_ssgq" v-if="isLeftSsGq">
												<view>嵊山与枸杞有大桥连通，去枸杞的船票售罄，可选择去嵊山的船票！</view>
												<view>嵊山码头距枸杞码头驾车<span style="color: #FF4141;font-weight: bold;">1小时</span>左右，</view>
												<view>请您合理安排好时间</view>
											</view>
										</view>
									</view>
								</view>
								<view class="cpbb_right">
									<view class="cpbb_top">
										<view class="ct_address">
											<text>{{ params2.from }}</text>
											<text>{{ params2.to }}</text>
											<image class="ct_rbg ct_rbg_two"
												src="https://i.ringzle.com/file/20240120/2462d91e21384df59394fe486643da2f.png">
											</image>
										</view>
										<view class="ct_date" @tap="rightShow = true">
											<text>{{ params2.yr }}{{ params2.week }}</text>
											<image src="https://i.ringzle.com/file/20240120/c9c2a546bd8b4c4bae0e95a637c72b45.png">
											</image>
										</view>
									</view>
									<view class="cpbb_items">
										<block v-if="rightLineList.length > 0">
											<view class="c_items" v-for="(item, index) in rightLineList" :key="index"
												@tap="selectRightItem(item, index)"
												:class="((hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount) == 0 || item.lineState != 0) ? 'active' : (item.isSelect ? 'selected_item' : '')">
												<view class="ci_top">
													<view class="time">
														<block v-if="item.busStartTime">{{ item.busStartTime }}</block>
														<block v-else>{{ item.sailTime || '' }}</block>
													</view>
													<view class="middle">
														<view class="top">
															<image src="https://i.ringzle.com/file/20240120/1d79f0d505734dffa5d4830fcf3b0f58.png"
																mode="">
															</image>
															<view class="texts">
																<text>{{ item.startPortName }}</text>
																<text>{{ item.endPortName }}</text>
															</view>
														</view>
														<view class="right" v-if="item.lineState == 0">
															<view class="price">
																￥<span>{{ !hasLocal ? item.priceAndTotalCount.minPrice :
																	item.priceAndTotalCount.localMinPrice }}</span><span class="rp_qi">起</span></view>
															<text
																v-if="(hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount) > 0">余票{{
																	hasLocal ? item.priceAndTotalCount.totalCount : item.priceAndTotalCount.pubTotalCount
																}}张</text>
															<text v-else>售罄</text>
														</view>
														<view class="right_state" v-else>
															{{ item.lineStateName || '未知' }}
														</view>
													</view>
												</view>
												<view class="cbottom">
													{{ item.clxm }}
													<span v-if="item.timeMemosStr">{{ item.timeMemosStr }}</span>
													<view class="cclp" v-if="item.busStartTime" @tap.stop="showInfo(item)">
														<text>车船联票</text>
														<image v-if="item.priceAndTotalCount.totalCount != 0"
															src="https://i.ringzle.com/file/20240318/60518164c4a140fc857972fca377151b.png"></image>
														<image v-else src="@/static/index/steamerTicket/icon_trigon_hs.png">
														</image>
													</view>
												</view>
											</view>
										</block>
										<view class="c_empty" v-else>
											<image src="https://i.ringzle.com/file/20240229/e8f154c331804809b4c6f851ece996c6.png">
											</image>
											<view class="ce_tip">暂无航班班次</view>
											<view class="ce_ssgq" v-if="isRightSsGq">
												<view>嵊山与枸杞有大桥连通，去枸杞的船票售罄，可选择去嵊山的船票！</view>
												<view>嵊山码头距枸杞码头驾车<span style="color: #FF4141;font-weight: bold;">1小时</span>左右，</view>
												<view>请您合理安排好时间</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="cpb_tip">
								<text>温馨提示：请注意航班换乘时间</text>
							</view>
							<view class="cpb_bottom">
								<view class="cbb_btn" @tap="buyTicket">下一步</view>
							</view>
						</block>
						<block v-else-if="step2 == 1">
							<CxghArriveDepartConfirm @toPassengerPayTwo="toPassengerPayTwo" ref="cxghArriveDepartConfirm" />
						</block>
						<block v-else-if="step2 == 2">
							<view style="padding: 0 24rpx ;">
								<CxghPassengerPay @toPayResult="toPayResultTwo" :coupon="coupon" :isCxghDc="true" ref="cxghPassengerPay" />
							</view>
						</block>
						<block v-else-if="step2 == 3">
							<CxghPayResult @toCloseShip="toCloseShip" ref="cxghPayResultTwo" />
						</block>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="v-calendar">
			<u-calendar title="选择第一程日期" confirmDisabledText="确定" :show="leftShow" @confirm="leftConfirm"
				@close="leftShow = false" :closeOnClickOverlay="true" ref="calendar2" :maxDate="maxDate">
			</u-calendar>
			<u-calendar title="选择第二程日期" confirmDisabledText="确定" :show="rightShow" @confirm="rightConfirm"
				@close="rightShow = false" :closeOnClickOverlay="true" ref="calendar3" :maxDate="maxDate">
			</u-calendar>
		</view>
		<view class="s-calendar">
			<u-calendar title="选择日期" confirmDisabledText="确定" :defaultDate="defaultDate" :show="sdShow" @confirm="sdConfirm"
				@close="sdShow = false" color="#007A69" ref="calendar4" :maxDate="maxDate">
			</u-calendar>
		</view>
		<view class="cclp_up">
			<u-popup :show="cclpShow" @close="cclpShow = false">
				<view class="cclp_info">
					<view class="ci_title">
						<text>车船联票</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="cclpShow = false"></image>
					</view>
					<view class="ci_tip">路线：汽车大巴+客船</view>
					<view class="ci_box">
						<view class="cib_item">{{ cclpInfo.busStartTime }}开车 {{ cclpInfo.startPortName }}
							<image src="https://i.ringzle.com/file/20240307/dc715e8e47ce49649067a9554c0c92e1.png">
							</image>
						</view>
						<view class="cib_item">{{ cclpInfo.sailTime }}开船 {{ cclpInfo.embarkPortName }}
							<image src="https://i.ringzle.com/file/20240307/ab80e33c11da46dbacd6361a0e537de2.png">
							</image>
							<span>到达港口的时间因路况、车况的不同会有变动，仅供您参考</span>
						</view>
						<view class="cib_item">{{ cclpInfo.endPortName }}
							<image src="https://i.ringzle.com/file/20240307/a9cf3df09f9a4a1f93e4dbe432089e25.png">
							</image>
						</view>
					</view>
					<view class="ci_btn" @tap="cclpShow = false">我知道了</view>
				</view>
			</u-popup>
		</view>
		<!-- 展示换乘图片 -->
		<view class="ewmup">
			<u-popup :show="codeShow" mode="center" :round="16" @close="codeShow = false">
				<view class="ewm_details">
					<view class="ed_title">
						<text>换乘攻略</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="codeShow = false"></image>
					</view>
					<view class="ed_img">
						<image :src="hcImg" mode="widthFix"></image>
					</view>
				</view>
			</u-popup>
			<u-popup :show="textShow" mode="center" :round="16" @close="textShow = false">
				<view class="ewm_details">
					<view class="ed_title">
						<text>{{ dcgjTitle }}</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="textShow = false"></image>
					</view>
					<view class="ed_img hcgl">
						<u-parse :content="textContent"></u-parse>
					</view>
				</view>
			</u-popup>
		</view>
	</page-meta>
</template>

<script>
import travelPlanning from '@/utils/travelPlanningMixin.js'
import travelPlanningShip from '@/utils/travelPlanningShip.js'

import CxghConfirmBooking from '@/pagesTaxi/travelPlanningShip/confirmBooking.vue'
import CxghPassengerPay from '@/pagesTaxi/travelPlanningShip/passengerPay.vue'
import CxghPayResult from '@/pagesTaxi/travelPlanningShip/payResult.vue'
import CxghArriveDepartConfirm from '@/pagesTaxi/travelPlanningShip/arriveDepartConfirm.vue'
	export default {
	mixins: [travelPlanning, travelPlanningShip],
	components: {
		CxghConfirmBooking,
		CxghPassengerPay,
		CxghPayResult,
		CxghArriveDepartConfirm
	},
	data() {
		return {
			list: [],
			today: '',
			time: '',
			timeShow: false,
			h: uni.getSystemInfoSync().windowHeight - 87,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			titleHeader: '路线选择',
			tabbar: [
				'公共交通',
				'自驾'
			],
			TabBarIndex: 0,
			beginShow: false,
			beginNavBarList: [{
				name: '城市',
			}, {
				name: '码头',
			}],
			cityPortFlag: 0,
			provinceFlag: true,
			province: '',
			city: '',
			scrollTop: '',
			cityIndex: null,
			groups: [],
			cityList: [],
			indexList: ["A", "B", "C", 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'k', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
				'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
			],
			startPortList: [],
			startPortIndex: null,
			arriveShow: false,
			endPortList: [],
			endPortIndex: null,
			dataList: {
				queryDate: "",
				trafficType: '',
				startSpot: {
					id: null,
					type: 2,
					name: ""
				},
				endSpot: {
					id: null,
					type: 1,
					name: ""
				}
			},
			hotCity: [],
			arriveShow: false,
			notQyt: false,
			faImgs: [
				'https://i.ringzle.com/file/20240206/44182a24454640eeb14b311fb562fb08.png',
				'https://i.ringzle.com/file/20240206/f0f32abae0cb4e43a6d8d975e7ab84d6.png'
			],
			cclpShow: false,
			cclpInfo: null,
			codeShow: false,
			hcImg: '',
			maxQueryDayNum: '',
			textShow: false,
			textContent: '',
			dcgjTitle: '',
			maxDate: '',
			scrollLeft:0,
			coupon:[]
		}
	},
	computed: {
		hiddenShow: function () {
			return this.cclpShow || this.selectShowOne || this.selectShowTwo || this.timeShow || this.codeShow || this.beginShow || this.arriveShow
		}
	},
	onLoad(option) {
		this.list = JSON.parse(option.list)
		this.dataList = JSON.parse(option.dataList)

		if (this.dataList.queryDate != '') {
			if (new Date().Format('yyyy-MM-dd') == this.dataList.queryDate) this.notQyt = true;
			else this.notQyt = false;
			this.time = this.dataList.queryDate.slice(-5) + ' ' + this.getDayOfWeek(this.dataList
				.queryDate)

			this.startDate = this.dataList.queryDate;

			var date = new Date(this.dataList.queryDate);
			const time = date.toISOString().split('T')[0];
			this.today = time;
			this.setClandarIndex(time);
			this.time = time.slice(-5) + this.getDayOfWeek(time);
			this.defaultDate = time;
			// this.params.startDate = this.dataList.queryDate;
			// this.params1.startDate = this.dataList.queryDate;
			// this.params2.startDate = this.dataList.queryDate;
		} else {
			this.getCurrentDate()
		}
		// this.time = this.dataList.queryDate.slice(-5) + ' ' + this.getDayOfWeek(this.dataList
		// 	.queryDate)

		this.selectAllSpot()
		// this.getCurrentDate()
		this.TabBarIndex = this.dataList.trafficType - 1

		this.$refs.calendar1.setFormatter(this.formatter);
		this.$refs.calendar2.setFormatter(this.formatter);
		this.$refs.calendar3.setFormatter(this.formatter);
		this.$refs.calendar4.setFormatter(this.formatter);
	},
	onReady() {
		this.getMaxDate();
	},
	onShow() {
		if(this.$refs.cxghPassengerPay) this.$refs.cxghPassengerPay.toGetPassengers();
		let that = this
		uni.$on('updateData',function(data){
			console.log(data);
			if(data){
				that.coupon = data
			}else{
				that.coupon = []
			}
		})
	},
	methods: {
		getMaxDate() {
			this.$api.get('/travel/isshipsaleconfig/page').then(res => {
				if (res.data.code === 0) {
					if (res.data.data.list.length > 0) {
						this.maxQueryDayNum = res.data.data.list[0].wysts;
						this.maxDate = new Date(new Date().setDate(new Date().getDate() + (+this.maxQueryDayNum))).Format('yyyy-MM-dd');
						this.initClandar(this.maxQueryDayNum);
					}
				} else this.$showModal(res.data.msg);
			})
		},
		formatter(day) {
			if (this.maxQueryDayNum) {
				for (let i = 0; i <= +this.maxQueryDayNum; i++) {
					let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
						'yyyy-MM-dd');
					let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
					if (now == temp) {
						day.bottomInfo = '可选'
					}
				}
				return day
			}
		},
		showHcImg(item) {
			if (item.huanChengPic) {
				this.codeShow = true;
				this.hcImg = item.huanChengPic;
			}
		},
		startDh(item) {
			uni.openLocation({
				latitude: Number(item.latitude),
				longitude: Number(item.longitude),
				name: item.name
			});
		},
		toDcgl(textContent, title) {
			this.textShow = true;
			this.textContent = textContent;
			this.dcgjTitle = title;
		},
		setParams(param, index) {
			switch (index) {
				case 1:
					this.params = {
						from: param.startPortName,
						to: param.endPortName,
						startPortNo: param.startPortId,
						endPortNo: param.endPortId,
						startDate: new Date().Format(this.today),
						pzlx: 0
					}
					this.showCxghOne()
					break
				case 2:
					this.params1 = {
						city: this.dataList.startSpot.name,
						from: param[0].startPortName,
						to: param[0].endPortName,
						startPortNo: param[0].startPortId,
						endPortNo: param[0].endPortId,
						startDate: new Date().Format(this.today),
						pzlx: 0,
						carShip: param[0].busStartTime
					}
					this.params2 = {
						from: param[1].startPortName,
						to: param[1].endPortName,
						startPortNo: param[1].startPortId,
						endPortNo: param[1].endPortId,
						startDate: new Date().Format(this.today),
						pzlx: 0,
						carShip: param[1].busStartTime
					}
					this.showCxghTwo()
					break
			}

		},
		// 数字转化成汉字
		arabicToChinese(number) {
			var chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
			if (number >= 1 && number <= 9) {
				return chineseNumbers[number - 1];
			} else {
				return number;
			}
		},
		getCurrentDate() {
			var date = new Date();
			var year = date.getFullYear();
			var month = ("0" + (date.getMonth() + 1)).slice(-2);
			var day = ("0" + date.getDate()).slice(-2);
			this.today = year + "-" + month + "-" + day;
		},
		// 前一天
		previousDay() {
			if (this.notQyt) return

			var date = new Date(this.today);
			date.setDate(date.getDate() - 1);
			const time = date.toISOString().split('T')[0];
			this.today = time;
			this.defaultDate = time;
			this.dataList.queryDate = time;
			this.setClandarIndex(time);
			this.time = time.slice(-5) + this.getDayOfWeek(time);
			if (new Date().Format('yyyy-MM-dd') == new Date(this.today).Format('yyyy-MM-dd')) this.notQyt = true;
			else this.notQyt = false;
			this.submit()
		},
		// 后一天
		nextDay() {
			var date = new Date(this.today);
			date.setDate(date.getDate() + 1);
			const time = date.toISOString().split('T')[0];
			this.today = time;
			this.defaultDate = time;
			this.setClandarIndex(time);
			if (new Date().Format('yyyy-MM-dd') == new Date(this.today).Format('yyyy-MM-dd')) this.notQyt = true;
			else this.notQyt = false;
			this.dataList.queryDate = time;
			this.time = time.slice(-5) + this.getDayOfWeek(time);

			this.submit()
		},
		// 日历确定时间
		timeConfirm(e) {
			this.dataList.queryDate = e[0];
			let diff = Date.parse(this.dataList.queryDate) - Date.parse(new Date().Format('yyyy-MM-dd'));
			if (diff < 0) this.notQyt = true;
			else this.notQyt = false;
			this.time = this.dataList.queryDate.slice(-5) + ' ' + this.getDayOfWeek(e[0]);
			this.today = e[0];
			this.defaultDate = e[0];
			this.setClandarIndex(e[0]);
			this.timeShow = false;
			this.submit();
		},
		setClandarIndex(startDate) {
			let fidx = this.clandars.findIndex(d => d.nyr == startDate);
			this.cidx = fidx == -1 ? '' : fidx;
		},
		changeArrive() {
			this.arriveShow = true
		},
		// 查询出发地和目的地
		selectAllSpot() {
			this.$api.post('/api/tripspot/selectAllSpot').then(res => {
				if (res.data.code == 0) {
					this.startPortList = res.data.data.startPortList
					this.provinceList = res.data.data.provinceList
					this.endPortList = res.data.data.endPortList
					this.hotCity = res.data.data.hotCity
					if (this.dataList.queryDate == '') {
						const currentDate = new Date();
						const year = currentDate.getFullYear();
						const month = String(currentDate.getMonth() + 1).padStart(2, '0');
						const day = String(currentDate.getDate()).padStart(2, '0');
						const formattedDate = `${year}-${month}-${day}`;
						this.dataList.queryDate = formattedDate
						this.time = this.dataList.queryDate.slice(-5) + ' ' + this.getDayOfWeek(this.dataList
							.queryDate)
					}

					const groups = {};
					for (const item of this.provinceList) {
						const initial = item.initial;
						if (!groups[initial]) {
							groups[initial] = [];
						}
						groups[initial].push(item);
					}
					this.groups = groups
				}

			})
		},
		// 根据日期获取当前是周几
		getDayOfWeek(dateString) {
			var date = new Date(dateString);
			var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			var dayOfWeek = date.getDay();
			var dayOfWeekText = weekdays[dayOfWeek];
			return dayOfWeekText;
		},
		tapTabBar(index) {
			this.TabBarIndex = index
			this.dataList.trafficType = index + 1
			this.submit()
		},
		// 打开出发地弹窗
		tapBegin() {
			this.beginShow = true
			// this.visible = true
			this.provinceFlag = true
			this.province = ''
			this.city = ''
		},
		// 关闭出发地弹窗
		beginShowClose() {
			this.beginShow = false
			// this.visible = visible
		},
		// 出发地弹窗tabs切换
		chooseCityOrPort(e) {
			this.cityPortFlag = e.index
		},
		// 选择热门城市
		chooseHotCity(item, index) {
			this.dataList.startSpot = item
			this.beginShowClose()
			this.cityIndex = index
			this.submit()
		},
		// 点击右侧字母索引表
		findCity(v) {
			this.scrollTop = v;
		},
		// 选择出发地港口
		chooseStartPort(index) {
			this.startPortIndex = index
			this.dataList.startSpot = this.startPortList[index]
			this.submit()
			this.beginShowClose()
		},
		arriveShowClose() {
			this.arriveShow = false
		},
		// 选择目的地港口
		chooseEndPort(index) {
			this.endPortIndex = index
			this.dataList.endSpot = this.endPortList[index]
			this.submit()
			this.arriveShowClose()
		},
		// 关闭日历
		timeClose() {
			this.timeShow = false
		},
		tapCity(city) {
			this.city = city.name
			this.dataList.startSpot = city
			this.submit()
			this.beginShowClose()
		},
		tapPrvince(province) {
			this.province = province.name
			const groups = {};
			for (const item of province.cityList) {
				const initial = item.initial;
				if (!groups[initial]) {
					groups[initial] = [];
				}
				groups[initial].push(item);
			}
			this.cityList = groups
			this.provinceFlag = false
		},
		submit() {
			this.$api.post('/api/tripspot/autoGenTripPlanNew', this.dataList).then(res => {
				if (res.data.code == 0 && res.data.data.length) {
					this.list = res.data.data
				} else {
					uni.showToast({
						title: '暂无数据！请重新选择！',
						icon: 'none',
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pagesTaxi/travelPlanning1/travelPlanning1'
						})
					}, 1500)

				}
			})
		},
		showInfo(item) {
			this.cclpShow = true;
			this.cclpInfo = item;
		}
	}
}
</script>

<style lang="scss">
/deep/ .u-icon__icon {
	font-size: 36rpx !important;
}

/deep/ .u-navbar {
	.u-icon__icon {
		font-size: 52rpx !important;
	}
}

/deep/ .date_mid {
	.u-icon__icon {
		font-size: 20rpx !important;
		margin-left: 12rpx;
	}
}

/deep/ .uicon-play-right-fill {
	font-size: 22rpx !important;
}

::v-deep .u-navbar {
	&>view {
		background: linear-gradient(to bottom, #EEF5FE, #FFFFFF);
	}
}

.rightquanbu2 {
	width: 80rpx;
	height: 60rpx;
	font-size: 22rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 30rpx;
	text-align: center;
}

.rightquanbu1 {
	width: 80rpx;
	height: 60rpx;
	font-size: 22rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 80rpx;
	text-align: center;
}

.rightquanbu {
	width: 80rpx;
	height: 120rpx;
	background: #188FFE;
	border-radius: 16rpx;
}

.pricenews {

	font-size: 28rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	color: #FF4141;
	width: 115rpx;

	span {
		font-size: 20rpx;
	}
}

.pages {
	background: #F5F8FA;
	padding-bottom: 138rpx;

	.popUp {
		.citysIndex {
			width: 100%;
			height: 100%;
			/* height: calc(100% - 50px); */
		}

		.citysHead {
			padding: 0 36rpx;
		}

		.citysTitle {
			margin-top: 34rpx;
			font-size: 28rpx;
			font-weight: 600;
		}

		.citysTitle label:nth-child(2) {
			display: inline-block;
			font-weight: 500;
			margin-left: 40rpx;
		}

		/* 热门城市 */
		.citysHot {
			width: 100%;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
		}

		.citysHot-list {
			margin-top: 20rpx;
		}

		.citysHot-list view {
			display: inline-block;
		}

		.citysHot-list label {
			display: inline-block;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			width: 28%;
			height: 60rpx;
			border: 2rpx solid #eee;
			line-height: 60rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 8rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.citysHot-list view:nth-child(3n+3) {
			margin-right: 0;
		}

		/* 所有城市 */
		.citysList {
			padding: 0 36rpx;
		}

		.citysIndexList {
			position: relative;
		}

		.index-sidebar {
			display: flex;
			flex-direction: column;
			position: fixed;
			right: 36rpx;
			text-align: center;
			top: 38%;
			-webkit-user-select: none;
			user-select: none;
			color: #a0a0a0;
		}

		.index-bar {
			font-size: 13px;
			color: #bdbdbd;
			margin-bottom: 5px;
			width: 20px;
			height: 10px;
			border-radius: 50%;
			line-height: 10px;
			text-align: center;
		}

		.index-bar:active {
			background: #1474ED;

			font-size: 13px;
			color: #bdbdbd;
			margin-bottom: 5px;
			width: 20px;
			height: 10px;
			border-radius: 70%;
			line-height: 10px;
			text-align: center;
		}

		.listIndexTitle {
			width: 100%;
			background: #F5F8FA;

			color: #c3c3c3;
			font-size: 13px;

		}

		.listIndexText {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid #eee;

		}

		.listIndexText label {
			display: block;
			width: 100%;
			height: 100%;
		}

		.cityChecked {
			color: #1474ED;
		}

		.port {
			height: 835rpx;
			padding: 20rpx 0;

		}

		.city {
			padding: 20rpx 0;
			height: 835rpx;

			.hotCity_selected {
				color: #01B9F9;
			}

			.cityChoosed {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				padding: 13rpx 35rpx;

			}

			.hotCity {
				padding: 18px 30rpx;

				display: grid;
				grid-template-columns: auto auto auto auto auto;
				grid-gap: 10px;
			}
		}

		.tabs {
			border-bottom: 1rpx solid #efefef;

		}

		.popupTitle {
			font-size: 32rpx;
			font-weight: 700;

			padding: 27rpx;

		}

		.mainContent {
			margin-top: 43rpx;
			margin-bottom: 100rpx;
			display: grid;
			grid-template-columns: 31% 31% 31%;
			gap: 10px;
			padding: 0 20rpx;
			box-sizing: border-box;

			.portStyle {


				height: 72rpx;
				border: 1rpx solid #EFEFEF;
				margin-bottom: 20rpx;
				text-align: center;
				line-height: 72rpx;
				border-radius: 16rpx;
			}

			.portStyle_selected {


				height: 72rpx;
				font-weight: bold;
				color: #01B9F9;
				margin-bottom: 20rpx;
				text-align: center;
				line-height: 72rpx;
				border-radius: 16rpx;
				background: url('https://i.ringzle.com/file/20240112/eebcd206125747d797ab8ca979fe610d.png');
				background-repeat: no-repeat;
				background-size: contain;
			}
		}
	}

	.topTitle {
		background: #fff;
		border-radius: 0 0 36rpx 36rpx;
		padding: 30rpx 25rpx 5rpx 25rpx;

		.location {
			background: #FAFBFB;
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 32rpx 36rpx;
			border-radius: 16rpx;
			border: 1rpx solid #ebebeb;
			align-items: center;
			position: relative;

			.location_title {
				color: #666666;
				margin-right: 21rpx;
				font-size: 28rpx;
				font-weight: Regular;

			}

			&>image {
				width: 80rpx;
				height: 24rpx;
				position: absolute;
				left: 50%;
				margin-left: -40rpx;
				top: 50%;
				margin-top: -12rpx;
			}
		}

		.date {
			border-bottom: 1rpx #efefef solid;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 30rpx 8rpx;
			align-items: center;

			.date_qyt,
			.date_hyt {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
				display: flex;
				align-items: center;

				&.active {
					color: #AAAAAA;
				}

				&>image.notQyt_img {
					transform: rotate(180deg);
				}
			}

			.date_mid {
				color: white;
				background: #188FFE;
				border-radius: 9rpx;
				padding: 6rpx 17rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				font-weight: bold;
				display: flex;
				align-items: center;
			}
		}

		.tabBar {

			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			font-size: 28rpx;
			color: #666666;
			font-weight: bold;


			.tabBarItem {
				padding: 20rpx 1px;
			}
		}

		.tabBar_selected {
			color: #188FFE;
			padding: 20rpx 1px;
			border-bottom: 7rpx solid #188FFE;

		}
	}

	.imageTips {
		position: relative;
		color: white;
		height: 108rpx;
		margin-bottom: 6rpx;

		.image {
			width: 100%;
			height: 108rpx;

			.image1 {
				position: absolute;
				left: 23px;
				top: 8px;
				font-size: 28rpx;

			}

			.image2 {
				position: absolute;
				top: 17px;
				left: 80px;
				font-size: 26rpx;
			}
		}

		.it_tip {
			position: absolute;
			top: 12rpx;
			left: 80px;
			font-size: 24rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 44rpx;
		}
	}

	.programme {
		// padding: 20rpx;
		padding-top: 20rpx;


		.card {
			position: relative;
			padding-bottom: 20rpx;
			background: #ffff;
			border-radius: 27rpx;
			margin-bottom: 20rpx;

			.image {
				height: 54rpx;
				width: calc(100% - 12rpx);
				position: absolute;
				top: -2px;
				left: 6rpx;
			}

			.card_title {
				position: absolute;
				top: 0;
				display: flex;
				height: 54rpx;
				line-height: 54rpx;
				width: calc(100% - 12rpx);
				padding: 0 6rpx;
				box-sizing: border-box;
				margin-left: 6rpx;
				color: #06B86F;
				justify-content: space-between;
				align-items: center;

				&>image {
					width: 94rpx;
					height: 28rpx;
					margin-left: 24rpx;
				}

				.else_span {
					font-weight: 700;
					font-size: 30rpx;
					color: #188FFE;
					margin-left: 24rpx;
					margin-bottom: 4px;
				}
			}

			.content {
				position: relative;

				.content1 {
					padding: 81rpx 20rpx 30rpx;


				}

				.card1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.card1_shipTicket {
						display: flex;
						justify-content: space-between;
						width: 100%;
						align-self: center;

						.shipTicket {
							display: flex;
							flex-direction: column;
							align-self: center;
							flex-grow: 1;

							.shipTicketFor {
								display: flex;
								flex-direction: row;
								width: 100%;
								padding: 20rpx 0;
								align-items: center;
								margin-bottom: 10rpx;

								.right {
									background: #188FFE;
									border-radius: 27rpx;
									color: white;
									margin-left: 14rpx;
									height: 124rpx;
									padding: 21rpx;
									box-sizing: border-box;
									width: 93rpx;
								}

								.left {
									width: 100%;
									height: 77rpx;
									background: #F6FBFF;
									border-radius: 23rpx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									padding: 30rpx 9px;
									// margin-left: 30rpx;

									.price {

										color: #FF4141;
									}

									.left1 {
										max-width: 107rpx;
									}

									.left2 {
										display: flex;
										flex-direction: column;
										justify-content: space-between;
										align-self: center;
										width: 150rpx;

										&>image {
											width: 130rpx;
											height: 24rpx;
											padding-left: 10rpx;
										}
									}
								}
							}

							.shipTicketEmpty {
								display: flex;
								flex-direction: column;

								image {
									width: 204rpx;
									height: 130rpx;
								}

								.ce_tip {
									font-size: 26rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #333333;
									margin-left: 20rpx;
								}
							}

						}
					}

					.icon {
						display: flex;
						align-items: center;

						.imageTop {
							width: 72rpx;
							display: flex;
							justify-content: center;
						}

						&>image {
							width: 72rpx;
							height: 72rpx;
							margin-right: 30rpx;
							position: absolute;
							z-index: 1;
						}
					}

					.operateBtn {
						padding: 13rpx 21rpx;
						background: #ebf5ff;
						border-radius: 31rpx;
						color: #188FFE;
						width: 132rpx;
						position: absolute;
						bottom: -45rpx;
						right: 0;
						z-index: 9;

						&.dcgl {
							top: 50%;
							margin-top: -26rpx;
							bottom: inherit;
						}

						&.gjxq {
							position: relative;
							bottom: 0;
						}

						&.gjxq2 {
							bottom: 35rpx;
						}

						&>image {
							width: 24rpx;
							height: 24rpx;
						}

						&.obringht {
							position: absolute;
							right: 0;
							// top: 50%;
							margin-top: -30rpx;
						}
					}



					.city {

						height: 32rpx;
						font-size: 32rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #111111;
						line-height: 32rpx;
						margin-left: 80rpx;
					}

					.routeInfo {


						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #88919D;

						margin-left: 10rpx;
					}

					.rectAngle {
						width: 72rpx;
						display: flex;
						justify-content: center;

						.greenRectAngle {
							width: 31rpx;
							min-height: 104rpx;
							background: #3DC569;

							display: block;
						}

						.blueRectAngle {
							width: 31rpx;
							min-height: 247rpx;
							background: #188FFE;

							display: block;

						}
					}
				}

			}

		}

	}
}
</style>
<style scoped lang="less">
@import url("@/static/css/travelPlanning.less");

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
	width: 102rpx;
	height: 100%;
}

.ewmup {
	::v-deep.u-popup__content {
		width: calc(100% - 48rpx);
		height: 80%;
	}

	.ewm_details {
		height: 100%;

		.ed_title {
			width: 100%;
			height: 110rpx;
			background: #F5F8FA;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 36rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.ed_img {
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			height: calc(100% - 150rpx);
			overflow-y: auto;

			&.hcgl {
				padding: 0 24rpx 40rpx;
				box-sizing: border-box;
			}

			image {
				width: 90%;
			}
		}
	}
}

::v-deep .cclp_up {
	.u-popup__content {
		border-radius: 24rpx 24rpx 0 0;
	}
}

.cclp_info {
	width: 100%;
	padding: 40rpx 23rpx 64rpx;
	box-sizing: border-box;
	border-radius: 24rpx 24rpx 0 0;

	.ci_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			line-height: 36rpx;
		}

		image {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 50%;
			margin-top: -18rpx;
			right: 13rpx;
		}
	}

	.ci_tip {
		margin-top: 26rpx;
		padding-left: 9rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.ci_box {
		width: 100%;
		margin-top: 23rpx;
		position: relative;
		padding-left: 87rpx;
		box-sizing: border-box;

		&:before {
			content: '';
			width: 22rpx;
			height: 88%;
			background: #188FFE;
			position: absolute;
			left: 25rpx;
			top: 6%;
		}

		.cib_item {
			padding: 21rpx 0;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			margin-top: 26rpx;
			position: relative;

			&:first-child {
				margin-top: 0;
			}

			image {
				width: 72rpx;
				height: 72rpx;
				position: absolute;
				left: -88rpx;
				top: 50%;
				margin-top: -36rpx;
				z-index: 2;
			}

			span {
				position: absolute;
				top: 60rpx;
				left: 0;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				line-height: 33rpx;
			}
		}
	}

	.ci_btn {
		margin-top: 37rpx;
		width: 100%;
		height: 88rpx;
		background: #007A69;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
}
</style>